<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <script src="js/simpleCanvas.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            overflow: hidden;
        }

        #canvas_div {
            width: 100vw;
            height: 100vh;
        }
    </style>
    <script>
        var getRandomColor = function () {
            return '#' + (function (color) {
                return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)])
                    && (color.length == 6) ? color : arguments.callee(color);
            })('');
        }
    </script>

    <script>


    </script>
</head>

<body>
    <div id="canvas_div">
        <canvas id="canvas"></canvas>
    </div>
    <script>
        // h=1/2gt^2
        // f = m a
        // f = m g
        // g=0.98
        // 1m = 10px
        /** @type {HTMLCanvasElement} */
        let canvas = document.getElementById("canvas")
        let ctx = canvas.getContext("2d")
        /** @type {HTMLCanvasElement} */
        let backCanvas = document.createElement("canvas")
        let backCtx = backCanvas.getContext("2d")
        let mouse = {}
        backCanvas.addEventListener("mousemove", function (e) {
            mouse = e;
        })
        let width = canvas.width = backCanvas.width = window.innerWidth;
        let height = canvas.height = backCanvas.height = window.innerHeight;

        let gravity = 9.8;
        let line = { x1: 0, y1: height - 20, x2: width, y2: height - 20 };
        let meter = 10;
        let meter_dev_px = 30
        let key = {
            up: false,
            left: false,
            down: false,
            right: false,
            space: false,
        };
        let squre = {
            x: width / 2,
            y: height - 30 - (meter * meter_dev_px),
            w: 100,
            h: 100,
            s: 0,
            m: 2,
            c: getRandomColor(),
            nowel: 0.8,
            mouseEnter: function (mouse) {
                squre.c = getRandomColor();
            }
        }
        let lastTime = 0;
        let fpsCount = 0;
        let fps = 0;
        let wave = {
            x: 0,
            i: 0,
            data: [],
            nowel: 0.8,
        }
        let selectObj = "";
        let updateCanvas = function () {
            var imgData = backCtx.getImageData(0, 0, width, height);
            ctx.putImageData(imgData, 0, 0);
            draw();
            fpsCount++;
            requestAnimationFrame(updateCanvas)
        }
        let draw = function () {
            claer()
            check();
            drawSkye()
            drawSun();
            drawCloud();
            drawRoad();
            drawHead();
            //drawWave();
             drawWater()
            // drawLine();
            drawAqure();
            drawButton();
            element.refresh(backCtx)
            drawFps();
        }
        let drawSun = function () {
            backCtx.save()
            backCtx.beginPath()
            backCtx.fillStyle = "red";
            backCtx.arc(width - 200, 100, 40, 0, Math.PI * 2);
            backCtx.shadowBlur = 40
            backCtx.shadowColor = "orange"
            backCtx.fill();
            backCtx.closePath()
            backCtx.restore()

            if (backCtx.isPointInPath(mouse.x, mouse.y)) {
                selectObj = "sun";
            }
        }

        let drawCloud = function () {
            backCtx.save()
            backCtx.beginPath()
            backCtx.fillStyle = "#FFF";
            backCtx.moveTo(100, 100)
            backCtx.bezierCurveTo(100, 10, 200, 10, 200, 100)
            backCtx.bezierCurveTo(200, -100, 400, -100, 400, 100)
            backCtx.bezierCurveTo(400, 10, 500, 10, 500, 100)
            backCtx.bezierCurveTo(500, 200, 100, 200, 100, 100)
            backCtx.fill();
            backCtx.closePath()
            backCtx.restore()

            if (backCtx.isPointInPath(mouse.x, mouse.y)) {
                selectObj = "cloud";
            }
        }

        let drawSkye = function () {
            backCtx.save()
            backCtx.beginPath()
            backCtx.fillStyle = "#87CEEB";
            backCtx.rect(0, 0, width, height)
            backCtx.fill();
            backCtx.closePath()
            backCtx.restore()

            if (backCtx.isPointInPath(mouse.x, mouse.y)) {
                selectObj = "sky";
            }
        }

        let drawRoad = function () {
            backCtx.save()
            backCtx.beginPath()
            backCtx.fillStyle = "#999";
            backCtx.moveTo(width / 2, height / 2)
            backCtx.lineTo(width / 4, height - 20)
            backCtx.lineTo(width / 4 * 3, height - 20)
            backCtx.lineTo(width / 2, height / 2)
            backCtx.fill();
            backCtx.closePath()
            backCtx.restore()
        }

        let drawWater = function () {
            backCtx.save()
            backCtx.beginPath()
            backCtx.fillStyle = "#1400ff"
            backCtx.rect(0, height - 20, width, 20)
            backCtx.fill();
            backCtx.closePath()
            backCtx.restore()
        }
        //y = sin(x)
        let drawWave = function () {
            backCtx.save()
            backCtx.beginPath()
            backCtx.strokeStyle = "red"
            for (let i = 0; i < wave.data.length - 1; i++) {
                backCtx.quadraticCurveTo(wave.data[i].x, wave.data[i].y, wave.data[i + 1].x, wave.data[i + 1].y)
            }
            backCtx.stroke();
            backCtx.closePath()
            backCtx.restore()
        }
        let drawHead = function () {
            backCtx.save()
            backCtx.beginPath()
            backCtx.fillStyle = "#f4f";
            backCtx.rect(0, 0, width, 20)
            backCtx.fill();
            backCtx.closePath()

            backCtx.fillStyle = "#04f";
            backCtx.beginPath()
            backCtx.fillText("首页", 0, 20)
            backCtx.closePath()
            backCtx.beginPath()
            backCtx.fillText("下载", 20, 20)
            backCtx.closePath()
            backCtx.beginPath()
            backCtx.fillText("产品", 40, 20)
            backCtx.closePath()
            backCtx.beginPath()
            backCtx.fillText("使用手册", 80, 20)
            backCtx.closePath()
            backCtx.beginPath()
            backCtx.fillText("联系我们", 160, 20)
            backCtx.closePath()
            backCtx.restore()

        }
        let drawLine = function () {
            line = { x1: 0, y1: height - 20, x2: width, y2: height - 20 };
            backCtx.save()
            backCtx.beginPath()
            backCtx.strokeStyle = "#FFF";
            backCtx.moveTo(line.x1, line.y1);
            backCtx.lineTo(line.x2, line.y2);
            backCtx.closePath()
            backCtx.stroke();
            backCtx.restore()
        }
        let drawAqure = function () {
            backCtx.save()
            backCtx.beginPath()
            backCtx.fillStyle = squre.c;
            backCtx.rect(squre.x, squre.y, squre.w, squre.h);
            backCtx.fill();
            backCtx.closePath()
            backCtx.restore()

            if (backCtx.isPointInPath(mouse.x, mouse.y)) {
                selectObj = "squre";
            }
        }
        let drawFps = function () {
            backCtx.save()
            backCtx.beginPath()


            backCtx.font = "20px 微软雅黑"
            backCtx.fillStyle = "#FFF";
            backCtx.fillText("Fps:" + fps, 10, 15)

            backCtx.closePath()
            backCtx.restore()
            if (backCtx.isPointInPath(mouse.x, mouse.y)) {
                selectObj = "text";
            }
        }

        let drawButton = function () {
            backCtx.save()
            backCtx.beginPath()
            backCtx.font = "blue";
            backCtx.fillStyle = "blue";
            backCtx.rect((width - 50) / 2, height / 2, 100, 50);
            backCtx.fill();
            backCtx.closePath()
            backCtx.restore()
            if (backCtx.isPointInPath(mouse.x, mouse.y)) {
                selectObj = "button1";
            }
        }

        canvas.addEventListener("click", function (e) {
            element.click(e)
            // if (selectObj == "button1") {
            //     console.log("点击了按钮")
            // } else if (selectObj == "cloud") {
            //     console.log("点击了云彩")
            // } else if (selectObj == "sun") {
            //     console.log("点击了太阳")
            // } else if (selectObj == "sky") {
            //     console.log("点击了天空")
            // } else if (selectObj == "squre") {
            //     console.log("点击了方块")
            // } else if (selectObj == "text") {
            //     console.log("点击了文字")
            // }
        })

        let claer = function () {
            backCtx.save()
            backCtx.beginPath()
            backCtx.fillStyle = "#000"
            backCtx.rect(0, 0, width, height);
            backCtx.fill();
            backCtx.closePath()
            backCtx.restore()
        }


        let b = new Date().getTime()
        let check = function () {
            if (squre.y >= height - 20 - squre.h) {
                squre.y = height - 20 - squre.h;
                squre.s *= -squre.nowel
                if (Math.abs(squre.s) < 1) {
                    squre.s = 0;
                } else {
                    wave.x = squre.x
                }
            }
        }

        let updateObj = function () {
            wave.x--;

            if (key.up || key.space) {
                squre.s = 0;
            } else {
                squre.s += gravity * (1 / 60)
                if (squre.y <= height - 30) {
                    squre.y = squre.y + squre.s * (1 / 60) * meter_dev_px;
                }
            }

            if (key.up) {
                squre.y -= 10;
            }
            if (key.left) {
                squre.x -= 10;
            }
            if (key.down) {
                squre.y += 10;
            }
            if (key.right) {
                squre.x += 10;
            }
            if (key.space) {
                squre.y -= 20;
            }
            // if (squre.x != mouse.x) {
            //     if (squre.x < mouse.x) {
            //         squre.x++
            //     } else {
            //         squre.x--;
            //     }
            //     if (squre.y < mouse.y) {
            //         squre.y++
            //     } else {
            //         squre.y--
            //     }
            // }
            requestAnimationFrame(updateObj);
        }
        let flashFps = function () {
            setInterval(function () {
                fps = fpsCount;
                fpsCount = 0;
            }, 1000);
        }
        canvas.addEventListener("play", function (e) {
            console.log("play", e)
        })

        canvas.addEventListener("keydown", function (e) {
            element.keyDown(e);
        })
        canvas.addEventListener("keyup", function (e) {
            element.keyUp(e);
        })

        let init = function () {
            canvas.dispatchEvent(new CustomEvent("play", {
                detail: { title: 'This is title!' },
            }));
            updateCanvas();
            updateObj();
            flashFps();
        }();

        window.onresize = function () {
            width = canvas.width = backCanvas.width = window.innerWidth;
            height = canvas.height = backCanvas.height = window.innerHeight;
        }

        document.addEventListener("keydown", function (e) {
            //canvas.dispatchEvent(new KeyboardEvent(e));
            console.log(`keyCode: ${e.key},${e.keyCode}`)
            if (e.key === "w") {
                key.up = true;
            }
            if (e.key === "a") {
                key.left = true;
            }
            if (e.key === "s") {
                key.down = true;
            }
            if (e.key === "d") {
                key.right = true;
            }
            if (e.key === " ") {
                key.space = true;
            }
        })


        document.addEventListener("keyup", function (e) {
            console.log(`keyCode: ${e.key},${e.keyCode}`)
            if (e.key === "w") {
                key.up = false;
            }
            if (e.key === "a") {
                key.left = false;
            }
            if (e.key === "s") {
                key.down = false;
            }
            if (e.key === "d") {
                key.right = false;
            }
            if (e.key === " ") {
                key.space = false;
            }
        })
        document.addEventListener("mousemove", function (e) {
            backCanvas.dispatchEvent(new MouseEvent("mousemove", e))
        })

        function fixt(h) {
            return Math.sqrt(2 * h / gravity)
        }
        console.log(fixt(meter))
        // h=1/2gt^2
        function fixh(h, s) {
            return 1000 / 60
        }
    </script>
</body>
<!--
    2D
    元素，运动，控制，碰撞检测

 -->


</html>
